<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>Reservas</title>
        <link href="estilo.css" type="text/css" rel="stylesheet"/>
        <style type="text/css">
            #cboxLoadedContent{
                background: none repeat scroll 0 0 #FFFFFF;
            }
            #cboxTitle{
                font-weight: bold;
            }
            #cboxNext, #cboxPrevious, cboxClose{
                background: none;
            }
        </style>
    </h:head>
    <h:body styleClass="texto">
        <p:growl id="popup" life="3000" showDetail="true"/>
        <p:tabView id="tab" event="noNavigation" activeIndex="#{reserva.indexC}">
            <p:tab title="Consultar Reservas">
                <div style="overflow-y: scroll; height: 400px">
                    <h:form>
                        <p:dataTable id="tR" binding="#{reserva.tablaReservas}" value="#{reserva.listarReservas()}" var="res" emptyMessage="No hay registros" paginator="true" rows="6">
                            <p:column filterBy="#{res.codigoReserva}">
                                <f:facet name="header">
                                    Codigo
                                </f:facet>
                                #{res.codigoReserva}
                            </p:column>
                            <p:column filterBy="#{res.fechaRealizacion}">
                                <f:facet name="header">
                                    Fecha Realización
                                </f:facet>
                                #{res.fechaRealizacion}
                            </p:column>
                            <p:column filterBy="#{res.cliente.cedula}">
                                <f:facet name="header">
                                    Cédula Cliente
                                </f:facet>
                                #{res.cliente.cedula}
                            </p:column>
                            <p:column filterBy="#{res.estado}">
                                <f:facet name="header">
                                    Estado
                                </f:facet>
                                <center>
                                    <h:selectOneMenu value="#{res.estado}" onchange="submit()" valueChangeListener="#{reserva.desactivarReserva()}">
                                        <f:selectItem itemValue='a' itemLabel="Activa"/>
                                        <f:selectItem itemValue='i' itemLabel="Inactiva"/>
                                        <f:selectItem itemValue='c' itemLabel="Check-In"/>
                                    </h:selectOneMenu>
                                </center>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    Ver
                                </f:facet>
                                <center>
                                    <p:commandButton actionListener="#{reserva.consultarReserva()}" ajax="true" update="tab" image="ui-icon ui-icon-search"/>
                                </center>
                            </p:column>
                        </p:dataTable>
                    </h:form>
                </div>
            </p:tab>
            <p:tab title="Detalles de Reserva">
                <div style="overflow-y: scroll; height: 400px">
                    <h:form>
                        <p:commandButton value="Atrás" actionListener="#{reserva.irAtras()}" ajax="false" update="tab" image="ui-icon ui-icon-arrowreturnthick-1-w"/>
                    </h:form>
                    <br></br>
                    <p:fieldset legend="Reserva General" styleClass="texto" toggleable="true">
                        <h:form id="este">
                            <p:growl id="msju" showDetail="true" life="3000"/>
                            <h:panelGrid styleClass="texto" columns="2" style="width: 100%">
                                <p:fieldset legend="Información del Solicitante">
                                    <h:panelGrid columns="2">
                                        <h:outputLabel value="Cedula:"/>
                                        <p:inputText id="cedSolicitante" readonly="true" value="#{reserva.reserva.cliente.cedula}"/>
                                        <h:outputLabel value="Nombre:"/>
                                        <p:inputText readonly="true" value="#{reserva.reserva.cliente.nombre}"/>
                                        <h:outputLabel value="Teléfono:"/>
                                        <p:inputText readonly="true" value="#{reserva.reserva.cliente.telefono}"/>
                                    </h:panelGrid>
                                    <br></br>
                                    <p:panel styleClass="panelResumen" style="width: 230px">
                                        Modifique esta información con:
                                        <br></br>
                                        - Gestionar Cliente
                                        <br></br>
                                        - Mi perfil
                                    </p:panel>                                    
                                </p:fieldset>
                                <p:fieldset legend="Información de la Reserva" styleClass="fields">
                                    <h:panelGrid columns="2">
                                        <h:outputLabel value="Codigo:"/>
                                        <p:inputText id="codReserva" readonly="true" value="#{reserva.reserva.codigoReserva}"/>
                                        <h:outputLabel value="Fecha Realización:"/>
                                        <p:calendar disabled="true" value="#{reserva.reserva.fechaRealizacion}"/>
                                        <h:outputLabel value="Descripción:"/>
                                        <h:inputTextarea id="areaDes" disabled="#{reserva.noPermitirEdicion}" value="#{reserva.reserva.descripcion}" style="width: 176px; resize: none;"/>
                                    </h:panelGrid>
                                    <p:separator style="height: 1px; border-color: #a8a8a8"/>
                                    <center>
                                        <h:panelGrid columns="2">
                                            <p:commandButton id="modif" value="Modificar" actionListener="#{reserva.desbloquear()}" update="modif, areaDes, botonG, msju"/>
                                            <p:commandButton id="botonG" value="Guardar Cambios" actionListener="#{reserva.actualizarReserva()}" disabled="#{reserva.noPermitirEdicion}" ajax="false"/>
                                        </h:panelGrid>
                                    </center>
                                </p:fieldset>
                            </h:panelGrid>
                        </h:form>
                    </p:fieldset>
                    <center>
                        <br></br>
                        <h:panelGrid columns="2" styleClass="texto">
                            <p:fieldset legend="Reserva de Salas" toggleable="true" collapsed="true">
                                <h:form>
                                    <p:dataTable binding="#{reservaSala.tablaReservas}" value="#{reservaSala.listarReservasSalas()}" var="resSal" emptyMessage="Click en Nueva para reservar una sala" paginator="true" rows="3">
                                        <p:column >
                                            <f:facet name="header">
                                                Fecha
                                            </f:facet>
                                            #{resSal.fechaProg}
                                        </p:column>
                                        <p:column>
                                            <f:facet name="header">
                                                # Sala
                                            </f:facet>
                                            #{resSal.sala.numero}
                                        </p:column>
                                        <p:column >
                                            <f:facet name="header">
                                                Hora Inicio
                                            </f:facet>
                                            #{resSal.horaInicio}
                                        </p:column>
                                        <p:column>
                                            <p:commandButton actionListener="#{reservaSala.consultarReservaSala()}" ajax="true" update="nosplay" image="ui-icon ui-icon-search" oncomplete="dlgResSala.show()"/>
                                        </p:column>
                                        <f:facet name="footer">
                                            <p:commandButton value="Nueva" onclick="nueResSala.show()" type="button"/>
                                        </f:facet>
                                    </p:dataTable>
                                </h:form>
                            </p:fieldset>
                            <p:fieldset legend="Reserva de Habitaciones" toggleable="true" collapsed="true">
                                <h:form>
                                    <p:dataTable id="tablaRH" binding="#{reservaHabitacion.tablaReservas}" value="#{reservaHabitacion.listarReservasHabitacion()}" var="resHab" emptyMessage="Click en Nueva para reservar una habitación" paginator="true" rows="3">
                                        <p:column >
                                            <f:facet name="header">
                                                Ingreso
                                            </f:facet>
                                            #{resHab.fechaProgIn}
                                        </p:column>
                                        <p:column >
                                            <f:facet name="header">
                                                Salida
                                            </f:facet>
                                            #{resHab.fechaProgOut}
                                        </p:column>
                                        <p:column >
                                            <f:facet name="header">
                                                # Hab
                                            </f:facet>
                                            #{resHab.habitacion.numero}
                                        </p:column>
                                        <p:column>
                                            <p:commandButton actionListener="#{reservaHabitacion.consultarReservaHabitacion()}" ajax="true" update="display" image="ui-icon ui-icon-search" oncomplete="dlgResHab.show()"/>
                                        </p:column>
                                        <f:facet name="footer">
                                            <p:commandButton value="Nueva" onclick="nueResHab.show()" type="button"/>
                                        </f:facet>
                                    </p:dataTable>
                                </h:form>
                            </p:fieldset>
                        </h:panelGrid>
                    </center>
                </div>
            </p:tab>
        </p:tabView>
        <h:form id="nosplay">
            <p:dialog width="560" header="Reserva de Salón de Eventos" modal="true" widgetVar="dlgResSala" resizable="false">
                <p:commandButton title="Cancelar Reserva" image="ui-icon ui-icon-gear" style="float: right" actionListener="#{reservaSala.cancelarReservaSala()}" ajax="update"/>
                <p:panel>
                    <h:panelGrid columns="2">
                        <h:outputLabel value="Fecha programada del evento:"/>
                        <p:calendar id="fechaEvento" showOn="button" value="#{reservaSala.reservaSala.fechaProg}" required="true" requiredMessage="Fecha de evento es obligatoria" disabled="#{reservaSala.noPermitirEdicion}"/>
                        <h:outputLabel value="Hora de Inicio:"/>
                        <p:inputMask id="horaInicio" mask="99:99 aa" value="#{reservaSala.reservaSala.horaInicio}" required="true" requiredMessage="Hora de inicio es obligatoria" disabled="#{reservaSala.noPermitirEdicion}"/>
                        <h:outputLabel value="Hora de Fin:"/>
                        <p:inputMask id="horaFin" mask="99:99 aa" value="#{reservaSala.reservaSala.horaFin}" required="true" requiredMessage="Hora de fin es obligatoria" disabled="#{reservaSala.noPermitirEdicion}"/>
                        <h:outputLabel value="Descripción:"/>
                        <h:inputTextarea id="descripción" value="#{reservaSala.reservaSala.descripcion}" required="true" requiredMessage="Descripción del evento es requerida" style="width: 176px; resize: none;" disabled="#{reservaSala.noPermitirEdicion}"/>
                    </h:panelGrid>
                    <table width="100%">
                        <tr>
                            <td> <h:outputLabel value="Numero de Sala:"/> </td>
                            <td> <h:outputLabel id="nuSa" value="#{reservaSala.reservaSala.sala.numero}"/> </td>

                            <td colspan="3" rowspan="2">
                                <p:commandButton id="pencil" title="Modificar Sala" image="ui-icon ui-icon-pencil" disabled="#{reservaSala.noPermitirEdicion}" update="comboNu, cambiarSah"/>
                            </td>
                        </tr>
                        <tr>
                            <td> <h:outputLabel value="Max de Asistentes:"/> </td>
                            <td> <h:outputLabel id="nuHa" value="#{reservaSala.reservaSala.sala.capacidad} personas"/> </td>

                        </tr>
                    </table>
                    <br></br>
                    <p:fieldset id="cambiarSah" legend="Cambiar Sala de Evento" collapsed="#{reservaSala.noPermitirEdicion}" >
                        <center>
                            <h:panelGrid columns="2" >
                                <h:outputLabel value="Seleccione la nueva Sala:"/>
                                <h:selectOneMenu id="comboNu" disabled="#{reservaSala.noPermitirEdicion}">
                                    <f:selectItems value="#{reservaSala.listaSalas}" />
                                </h:selectOneMenu>
                            </h:panelGrid>
                        </center>
                    </p:fieldset>
                    <f:facet name="footer">
                        <center>
                            <h:panelGrid columns="3">
                                <p:commandButton value="Modificar" actionListener="#{reservaSala.desbloquear()}" ajax="true" update="fechaEvento, horaInicio, horaFin, descripción, asistentes, salvar, pencil"/>
                                <p:commandButton id="salvar" value="Guardar" actionListener="#{reservaSala.actualizarReservaSala()}" oncomplete="handleComplete(xhr, status, args)" ajax="false" update="popup"/>
                                <p:commandButton value="Cancelar" onclick="dlgResSala.close()"/>
                            </h:panelGrid>
                        </center>
                    </f:facet>
                </p:panel>
            </p:dialog>
        </h:form>
        <h:form  id="display">
            <p:dialog width="550" header="Reserva de Habitación" modal="true" widgetVar="dlgResHab" resizable="false">
                <p:commandButton title="Cancelar Reserva" image="ui-icon ui-icon-gear" style="float: right" actionListener="#{reservaHabitacion.cancelarReservaHabitacion()}" ajax="update"/>
                <p:panel>
                    <h:panelGrid columns="2">
                        <h:outputLabel value="Fecha programada de entrada:"/>
                        <p:calendar id="feIn" showOn="button" value="#{reservaHabitacion.reservaHabitacion.fechaProgIn}" required="true" requiredMessage="Fecha de entrada es obligatoria" disabled="#{reservaHabitacion.noPermitirEdicion}"/>
                        <h:outputLabel value="Fecha programada de salida:"/>
                        <p:calendar id="feOu" showOn="button" value="#{reservaHabitacion.reservaHabitacion.fechaProgOut}" required="true" requiredMessage="Fecha de salida es obligatoria" disabled="#{reservaHabitacion.noPermitirEdicion}"/>
                    </h:panelGrid>
                    <table width="100%">
                        <tr>
                            <td> <h:outputLabel value="Tipo de Habitación:"/> </td>
                            <td> <h:outputLabel id="tiHa" value="#{reservaHabitacion.reservaHabitacion.habitacion.distribucion}"/> </td>

                            <td colspan="3" rowspan="2">
                                <p:commandButton id="lapiz" title="Modificar Habitación" image="ui-icon ui-icon-pencil" disabled="#{reservaHabitacion.noPermitirEdicion}" update="nuevaHab, cambiarHah"/>
                            </td>
                        </tr>
                        <tr>
                            <td> <h:outputLabel value="Numero de Habitación:"/> </td>
                            <td> <h:outputLabel id="nuHa" value="#{reservaHabitacion.reservaHabitacion.habitacion.numero}"/> </td>

                        </tr>
                    </table>
                    <br></br>
                    <p:fieldset id="cambiarHah" legend="Cambiar Habitación" collapsed="#{reservaHabitacion.noPermitirEdicion}" >
                        <h:panelGrid columns="2" >
                            <h:outputLabel value="Numero de la nueva Habitación:"/>
                            <p:inputText id="nuevaHab" disabled="#{reservaHabitacion.noPermitirEdicion}"/>              
                            No recuerda la habitación?
                            <p:lightBox iframe="true" width="100%" height="100%">
                                <h:outputLink value="verHabitacionesDisponibles.xhtml" title="Ver Habitaciones Disponibles">
                                    <h:outputText value="Ver Habitaciones Disponibles"/>
                                </h:outputLink>                                   
                            </p:lightBox>
                        </h:panelGrid>
                    </p:fieldset>
                    <f:facet name="footer">
                        <center>
                            <h:panelGrid columns="3">
                                <p:commandButton value="Modificar" actionListener="#{reservaHabitacion.desbloquear()}" ajax="true" update="feIn, feOu, tiHa, notas, lapiz"/>
                                <p:commandButton id="save" value="Guardar" actionListener="#{reservaHabitacion.actualizarReservaHabitacion()}" ajax="update"/>
                                <p:commandButton value="Cancelar" onclick="dlgResHab.close()"/>
                            </h:panelGrid>
                        </center>
                    </f:facet>
                </p:panel>
            </p:dialog>
        </h:form>
        <h:form>
            <p:dialog width="560" header="Reserva de Salón de Eventos" modal="true" widgetVar="nueResSala" resizable="false">
                <p:panel>
                    <h:panelGrid columns="2">
                        <h:outputLabel value="Fecha programada del evento:"/>
                        <p:calendar id="fechaEvento" showOn="button" value="#{reservaSala.reservaSala.fechaProg}" required="true" requiredMessage="Fecha de evento es obligatoria"/>
                        <h:outputLabel value="Hora de Inicio:"/>
                        <p:inputMask id="horaInicio" mask="99:99 aa" value="#{reservaSala.reservaSala.horaInicio}" required="true" requiredMessage="Hora de inicio es obligatoria"/>
                        <h:outputLabel value="Hora de Fin:"/>
                        <p:inputMask id="horaFin" mask="99:99 aa" value="#{reservaSala.reservaSala.horaFin}" required="true" requiredMessage="Hora de fin es obligatoria"/>
                        <h:outputLabel value="Descripción:"/>
                        <h:inputTextarea id="descripción" value="#{reservaSala.reservaSala.descripcion}" required="true" requiredMessage="Descripción del evento es requerida" style="width: 176px; resize: none;"/>
                        <h:outputLabel value="# Asistentes aprox:"/>
                        <p:inputText id="asistentes" value="#{reservaSala.asistentes}" required="true" requiredMessage="Fije un aproximado de asistentes"/>
                    </h:panelGrid>
                    <f:facet name="footer">
                        <center>
                            <h:panelGrid columns="2">
                                <p:commandButton value="Guardar" actionListener="#{reservaSala.crearReservaSala()}" oncomplete="handleComplete(xhr, status, args)" ajax="false" update="popup"/>
                                <p:commandButton value="Cancelar" onclick="dlgResSala.close()"/>
                            </h:panelGrid>
                        </center>
                    </f:facet>
                </p:panel>
            </p:dialog>
        </h:form>
        <h:form>
            <p:dialog width="520" header="Reserva de Habitación" modal="true" widgetVar="nueResHab" resizable="false">
                <p:panel>
                    <h:panelGrid columns="2">
                        <h:outputLabel value="Fecha programada de entrada:"/>
                        <p:calendar showOn="button" value="#{reservaHabitacion.reservaHabitacion.fechaProgIn}" required="true" requiredMessage="Fecha de entrada es obligatoria"/>
                        <h:outputLabel value="Fecha programada de salida:"/>
                        <p:calendar showOn="button" value="#{reservaHabitacion.reservaHabitacion.fechaProgOut}" required="true" requiredMessage="Fecha de salida es obligatoria"/>
                        <h:outputLabel value="Tipo de Habitación:"/>
                        <h:selectOneMenu id="tiHa" value="#{reservaHabitacion.reservaHabitacion.habitacion.distribucion}">
                            <f:selectItem itemValue="Sencilla" itemLabel="Sencilla"/>
                            <f:selectItem itemValue="Doble" itemLabel="Doble"/>
                            <f:selectItem itemValue="Matrimonial" itemLabel="Matrimonial"/>
                            <f:selectItem itemValue="Otra" itemLabel="Otra"/>
                        </h:selectOneMenu>
                        <h:outputLabel value="Notas:"/>
                        <p:inputTextarea id="notas" autoResize="false" effectDuration="10" maxHeight="30"/>
                    </h:panelGrid>
                    <f:facet name="footer">
                        <center>
                            <h:panelGrid columns="2">
                                <p:commandButton value="Guardar" actionListener="#{reservaHabitacion.crearReservaHabitacion()}" oncomplete="handleComplete(xhr, status, args)" ajax="false" update="popup, wizard"/>
                                <p:commandButton value="Cancelar" onclick="dlgResHab.close()"/>
                            </h:panelGrid>
                        </center>
                    </f:facet>
                </p:panel>
            </p:dialog>
        </h:form>
        <script type="text/javascript">
                    function handleComplete(xhr, status, args) {
                            if(!args.validationFailed) {
                                    dlgResHab.hide();   
                                    dlgResSala.hide();  
                                    nueResHab.hide();   
                                    nueResSala.hide();     
                            } 
                    }
        </script>
    </h:body>
</html>